<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>漂流轨迹详情</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/my.css">
  <link rel="stylesheet" href="css/dropload.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
  <style>
  
  .track_item_right p {
    margin-left: 0.36rem;
    color: #666666;
    font-size: 0.24rem;
}
  
  </style>
</head>
<body>
<div class="header-box">
  <p>漂流轨迹详情</p>
</div>

<div class="bookDetails">
  <div class="bookDetails_box">
    <img id="bookImage1">
    <p id="bookName"></p>
<!--     <div class="key_words" id="keyWord"> -->
<!--       <a href="javascript:;">情商</a> -->
<!--       <a href="javascript:;">大师作品</a> -->
<!--       <a href="javascript:;">性格养成</a> -->
<!--       <a href="javascript:;">2-4岁</a> -->
<!--     </div> -->
<!--     <div class="xingxing1" style="margin-top:0.44rem;margin-left:0.42rem;position:relative;"> -->
    <div class="xingxing1" style="margin-left:0.42rem;position:relative;">
    <span>借阅价格：<span style="color: red">￥<span style="color: red" id="borrowPrice" ></span>/周</span></span><br>
      <b class="pingfen" >评分：</b>
      <b id="evaluationStarImgs">
      </b>
<!--       <span id="evaluationStar">4.3</span> -->
      <span class="readed" style="position:absolute;right:0.34rem;">被借阅：<b id="borrowCount">***</b>次</span>
    </div>
  </div>
  <div class="huise"></div>
  <div class="bookDetails_text">
    <table></table>
    <div class="bookDetails_text_item text_item1">
      <p>基本信息</p>
      <span style="margin-top:0.3rem;">出版社：<b id="press"></b></span><br>
      <span>绘本编码：<b id="bookCode"></b></span><br>
      <span>作者：<b id="author"></b></span><br>
      <span>主题：<b id="classificationName"></b></span><br>
      <span>适龄：<b id="readMinAge"></b>-<b id="readMaxAge"></b>岁</span><br>
<!--       <span>零售价格：￥<b id="retailPrice"></b></span><br> -->
<!--       <span>借阅价格：￥<b id="borrowPrice"></b>/周</span><br> -->
<!--       <span style="width:5.31rem;">可借阅站点：<b class="b11">西二旗万达广场购物中心三层A区3088室</b><b class="b22" style="display:none;">西二旗万达广场购物中心三层305室哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩吧</b></span> -->
<!--       <i id="iii"> ></i> -->
<!--     </div> -->
<!--     <div class="bookDetails_text_item text_item2"> -->
      <span>描述： <b id="describe"></b></span>
<!--       <span style="margin-top:0.32rem;width:6.74rem;">这本书把造成蛀牙重要的原因——细菌（牙虫）描绘得非常生动、有趣。让小朋友了解细菌在蛀牙中扮演的重要角色。同时更将造成蛀牙的其他重要原因：甜食及口腔清洁涵盖在内，让儿童正确了解造成蛀牙的原因。</span> -->
    </div>
  </div>
  <div class="huise"></div>
  
  <div class="track_con">
    <p>漂流轨迹<span><!-- （3） --></span></p>
    <ul id="track_con_list">
  <!--      <li>
        <span><i class="be_active"></i><b></b></span>
        <img src="img/my/touxiang@2x.png">
        <div class="track_item_right">
          <p>
            <i>永不言弃</i>
            
          </p>
          <p>
            <i>评价：</i>
            <b>5星</b>
          </p>
          <p>
            	<b>借阅时间：</b>
            <b>2018-05-16</b> -
            <b>2018-05-16</b>
          </p>
            <p>
            	<b>借阅地点：</b>
            <b>2018-05-16</b> -
            <b>2018-05-16</b>
          </p>
        </div>
      </li>  -->
      </ul>
      </div>
<!--   <div class="Details_evaluate"> -->
<!--     <table></table> -->
<!--     <p>读后评价</p> -->
<!--     <ul id="Details_list"> -->

<!--     </ul> -->
<!--   </div> -->
</div>


<!-- 
<div class="track">
  <div class="track_box">
    <img src="img/index/tuceng 32@2x.png">
    <div class="track_box_right">
      <p>牙虫大搬家（日本各大口<br>腔医院儿童牙科诊所热门<br>推荐：让孩子了解蛀牙，<br>主动刷牙） </p>
      <p>(日)西本康子</p>
    </div>
  </div>
  
  
  <div class="track_con">
    <p>漂流轨迹<span>（3）</span></p>
    <ul id="track_con_list">
      <li>
        <span><i class="be_active"></i><b></b></span>
        <img src="img/my/touxiang@2x.png">
        <div class="track_item_right">
          <p>
            <i>永不言弃</i>
            <b>2018-05-16 借阅</b>
          </p>
          <p>
            <i>评价：</i>
            <b>5星</b>
          </p>
          <p>
            很棒的一本绘本，宝贝特别爱吃甜食，跟他一<br>起看了这本绘本，再要吃糖时告诉他牙虫们会<br>在他牙齿里住下来......
          </p>
        </div>
      </li>

    </ul>
  </div>
</div>

-->
<div class="footer_kb"></div>
<div class="footer_kb1"></div>
</body>
<script src="js/jquery.js"></script><script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script src="js/jsrender.js"></script>
<script src="js/dropload.min.js"></script>

<!-- 图书展示模板 -->
<script id="book_evaluation_tmpl" type="text/x-jsrender">
<li>
        <span><i class="be_active"></i><b></b></span>
        <div class="divImg"><img src="{{:user.headimgurl}}"></div>
        <div class="track_item_right">
          <p>
            <i>{{:user.realname}}</i>
          </p>
 		<p></p>
          <p>
            <b>借阅时间：</b>
            <b>{{:borrowStartTime}}</b> -
            <b>{{:borrowEndTime}}</b>
          </p>
          <p>
            <b>借阅点：</b>
            <b>{{:pName}}</b> 
          </p>
          <p>
            <b>归还点：</b>
            <b>{{:returnPName}}</b> 
          </p>
        </div>
      </li>
</script>


<script>
$(function() {

	var id = getQueryString("id");
    var pageNum = 1;
	var pageSize = 5; 
	var noData = false;
	$("#aYuyue").attr("href", $("#aYuyue").attr("href") + "?id=" + id);
	$("#aPingjia").attr("href", $("#aPingjia").attr("href") + "&id=" + id);
	showBookDetail();
	showJieyue();

	function showBookDetail() {
		debugger
		$.get({
					url : window.baseUrl + '/api/book/book/find',
					data : {
						id : id
					},
					success : function(data) {
						var data = data.data;
						$("#bookImage1").attr("src", data.bookImage1);
						$("#bookName").html(data.bookName);
						$("#borrowCount").html(data.borrowCount);
						//$("#retailPrice").html(data.retailPrice);
						$("#borrowPrice").html(data.borrowPrice);
						$("#classificationName").html(data.classificationName);
						$("#readMinAge").html(data.readMinAge);
						$("#readMaxAge").html(data.readMaxAge);
						// 关键词
						var keyWords = data.keyWord.split(",");
						var keyWordsHtml = "";
						for (var index = 0; index < keyWords.length; index++) {
							keyWordsHtml += ' <a href="javascript:;">'
									+ keyWords[index] + '</a>';
						}
						$("#keyWord").html(keyWordsHtml);
						// 评分
						var evaluationStar = data.evaluationStar;
						var evaluationStarHtml = "";
						for (var index = 0; index < evaluationStar; index++) {
							evaluationStarHtml += '<img src="img/index/xing5@2x.png">';
						}
						$("#evaluationStarImgs").html(evaluationStarHtml);
						$("#evaluationStar").html(evaluationStar);
						// 出版社
						$("#press").html(data.press);
						$("#author").html(data.author);
						$("#describe").html(data.describe);

						$("#book_show").empty();
						var htmlOutput = $.templates("#book_show_tmpl")
								.render(data);
						$(id).html(htmlOutput);
					}
				});
	}

	function showJieyue() {
		var userId = getUserId();
		$.get({
					url : window.baseUrl + '/api/book/borrowReturnLog/getMyBook',
					data : {
						uid : userId,
						bid: id,
						pageNum : pageNum,
						pageSize : pageSize
					},
					success : function(data) {
						var data = data.data.list;
						debugger
						if(data.length<0){
							noData = true;
							return;
						}else{
							$("#bookCode").html(data[0].bookStock.bookCode);
						}
						
						//$("#Details_list").empty();
						var htmlOutput = $.templates("#book_evaluation_tmpl")
								.render(data);
						$("#track_con_list").append(htmlOutput);
					}
				});
	}
	
	var dropload = $('.track_con').dropload({
		domDown : {
	        domClass   : 'dropload-down',
	        domRefresh : '<div class="dropload-refresh">下面暂无数据</div>',
//	         domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
//	         domLoad    : '<div class="dropload-load"><span class="loading"></span>绘本加载中...</div>',
	         domNoData  : '<div class="dropload-noData">下面暂无数据</div>'
	    },
	    scrollArea : window,
	    autoLoad: false,
	    loadDownFn : function(me){
	    	debugger
	    	if(noData){
	    		 // 锁定
	            me.lock();
	            // 无数据
	            me.noData();
	    	}else{
		   		 pageNum+=1;
		   		 showJieyue();
		       	 me.resetload();
	    	}
	    	
	    }
	});	
	
	
})

</script>
</html>